<template>
  <el-row id="Home_vue" class="container" :class="isMobile?'home-mobile':''">
    <el-col :span="24" class="header mobile-menu" v-if="isMobile">
      <div class="logo">
        <img src="../assets/logo.png" alt="" style="width:24px;" />
      </div>
      <div class="option" @click="mobileMenuVisable=!mobileMenuVisable">
        <i :class="mobileMenuVisable?'el-icon-close':'el-icon-menu'"></i>
      </div>
      <div class="menus" v-if="mobileMenuVisable">
        <el-menu :default-active="$route.path" router background-color="#425669" text-color="#fff" active-text-color="#409EFF" style="border:none;" :collapse-transition="false" unique-opened @select="mobileMenuVisable = false;">
          <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
            <router-menu :index="index.toString()" v-if="!item.leaf" :node="item" :key="'rm_'+index" />
            <el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path" :key="'me_'+index">
              <i :class="item.iconCls"></i>{{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
        <div class="btns">
          <el-button type="text" @click="logout()">{{userinfo.ZK_NAME}}
            <span style="color:#c50606;">(退出登录)</span>
          </el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="24" class="header" v-else>
      <div class="logo" :class="collapsed ? 'logo_collapsed' : 'logo_expand'">
        <img src="../assets/logo.png" alt="" style="width:24px;" />
        <span v-if="!collapsed"><label style="color:#0080db;padding-left:5px;">VUE</label> 管理系统</span>
      </div>
      <div class="nav_title">
        <div class="tools" title="菜单折叠与展开" style="float:left;">
          <i :class="menuCls[0]" @click="menuToggle()"></i>
        </div>
        <span class="vueAction">{{$route.name}}</span>
        <span class="histotyTab" v-for="(item, index) in history" :key="index">
          <el-tag :closable="index!==history.length-1" @click="$router.push({path: item.path})" @close.stop="spliceTag(index)" :color="index === history.length-1 ? '#2c2e2f': '#3f4141'" size='small'>{{item.name}}</el-tag>
        </span>
      </div>
      <div class="userinfo">
        <el-dropdown trigger="hover">
          <div class="el-dropdown-link">
            <img :src="userinfo.ZK_HEAD_PORTRAIT" v-if="userinfo.ZK_HEAD_PORTRAIT" />
            <el-badge :is-dot="false">{{userinfo.ZK_NAME}}</el-badge>
            <i class="el-icon-caret-bottom" style="margin-left:5px;"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="$router.push({path: '/main'});">控制台</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="$router.push({path: '/setup'});">设置</div>
            </el-dropdown-item>
            <el-dropdown-item disabled>
              <div>更换头像</div>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <div @click="logout()" style="color:#c50606;">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>
    <el-col :span="24" class="main">
      <template v-if="!isMobile">
        <div class="aside_menu" ref="aside_menu" v-show="!collapsed">
          <div class="menu_search">
            <el-input placeholder="搜索..."></el-input>
          </div>
          <el-menu :default-active="$route.path" router background-color="#425669" text-color="#fff" active-text-color="#409EFF" style="border:none;" :collapse-transition="false">
            <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
              <router-menu :index="index.toString()" v-if="!item.leaf" :node="item" :key="'rm_'+index" />
              <el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path" :key="'me_'+index">
                <i :class="item.iconCls"></i>{{item.name}}
              </el-menu-item>
            </template>
          </el-menu>
        </div>
        <ul class="mini_menu" v-show="collapsed" ref="mini_menu">
          <el-tooltip v-for="(item,index) in $router.options.routes" :key="'mini_' + index" v-if="!item.hidden" effect="light" :content="item.name" placement="right">
            <li @click="menuToggle()">
              <i :class="item.iconCls"></i>
            </li>
          </el-tooltip>
        </ul>
      </template>
      <div class="section_router" :class="isMobile?'section_router_mobile':(collapsed ? 'section_router_collapsed' : 'section_router_expand')">
        <el-col :span="24">
          <el-breadcrumb class="top-breadcrumb" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <div class="sub_router">
          <router-view></router-view>
        </div>
      </div>
      <back-totop></back-totop>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      isMobile: true, // 是否处于移动端模式，将隐藏PC端的头部和侧边栏，使用迷你菜单
      mobileMenuVisable: false, // 移动端下，是否显示菜单项
      collapsed: false,
      menuCls: ['el-icon-d-arrow-left', 'el-icon-d-arrow-right'],
      history: [],
    };
  },
  computed: {
    userinfo() {
      return this.$store.state.userinfo;
    },
  },
  created() {
    this.isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
    this.$http.get('/api/start/verify').then(res => {
      if (res.data.flag === 'True') {
        this.$store.commit('updateUserinfo', res.data.result); // 更新vuex
      }
    });
    this.access();
    if (sessionStorage.getItem('session_history')) {
      this.history = JSON.parse(sessionStorage.getItem('session_history'));
    }
  },
  methods: {
    logout() {
      this.$confirm('确定要退出本系统?', '提示', {
        type: 'warning',
        center: this.isMobile,
      })
        .then(() => {
          this.$http
            .post('/api/start/logout', {
              random: Math.random(),
            })
            .then(() => {
              localStorage.clear();
              window.location.replace('/');
            });
        })
        .catch(() => {});
    },
    menuToggle() {
      this.collapsed = !this.collapsed;
      this.menuCls.reverse();
    },
    spliceTag(index) {
      this.history.splice(index, 1); // 会改变当前顺序
      sessionStorage.setItem('session_history', JSON.stringify(this.history));
    },
    access() {
      this.$http.get('/api/start/access');
    },
  },
  watch: {
    /* eslint-disable object-shorthand */
    '$route.name'() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      this.history.forEach((item, index) => {
        if (item.name === this.$route.name) {
          this.history.splice(index, 1);
        }
      });

      this.history.push({ name: this.$route.name, path: this.$route.path });
      if (this.history.length > 5) {
        this.history.splice(0, 1);
      }
      document.title = `管理系统-${this.history[this.history.length - 1].name}`;
      sessionStorage.setItem('session_history', JSON.stringify(this.history));
      this.isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(
        navigator.userAgent,
      );
    },
  },
};
</script>

<style lang="scss">
.container {
  position: relative;
  width: 100%;
  .header {
    height: 50px;
    line-height: 50px;
    background: #425669;
    color: #fff;
    box-shadow: 0 0 8px #324157;
    display: flex;
    justify-content: center;
    align-items: center;
    .logo {
      flex: none;
      height: 100%;
      width: 200px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      background: #2c2e2f;
      color: #efefef;
      cursor: pointer;
      text-shadow: 0 0 7px #5a5a5a;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .logo_collapsed {
      width: 60px;
    }
    .nav_title {
      flex: 1;
      padding-right: 12px;
      .tools {
        width: 20px;
        height: 26px;
        border-radius: 0 6px 6px 0;
        background: #2c2e2f;
        position: absolute;
        top: 12px;
        z-index: 2;
        color: #fff;
        line-height: 26px;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        &:hover {
          color: rgb(64, 158, 255);
        }
      }
      .vueAction {
        padding-left: 40px;
        padding-right: 20px;
        font-size: 15px;
        cursor: default;
      }
      .histotyTab {
        margin-right: 6px;
        cursor: pointer;
      }
    }
    .userinfo {
      flex: none;
      height: 100%;
      margin-right: 40px;
      .el-dropdown-link {
        cursor: pointer;
        color: #ffffff;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .el-dropdown-link img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 4px;
      }
    }
    &.mobile-menu {
      width: 100vw;
      display: block;
      position: fixed;
      z-index: 999;
      .logo {
        background: transparent;
        width: 50px;
      }
      .option {
        width: 50px;
        height: 100%;
        float: right;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .menus {
        max-height: calc(100vh - 50px);
        overflow: auto;
        position: absolute;
        z-index: 3000;
        width: 100%;
        min-height: 100px;
        background: #425669;
        top: 50px;
        border-top: 1px solid #777;
        box-sizing: border-box;
        .el-menu {
          .fa {
            color: inherit;
            margin-right: 5px;
          }
        }
        .btns {
          border-top: 1px solid #55606b;
          text-align: right;
          padding: 0 12px;
        }
      }
    }
  }
  .main {
    position: relative;
    .aside_menu {
      width: 200px;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      min-height: calc(100vh - 50px);
      background-color: #425669;
      i.fa {
        color: inherit;
        font-size: 18px;
        margin-right: 8px;
      }
    }
    .section_router {
      margin-left: 200px;
      overflow: auto; // 设置成bfc
      .top-breadcrumb {
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
      }
      .sub_router {
        overflow: auto; // 设置成bfc
        box-sizing: border-box;
        min-height: calc(100vh - 50px - 40px);
        border: 10px solid #f5f5f5;
        padding: 20px;
        min-width: 520px;
      }
    }
    .section_router_expand {
      margin-left: 200px;
    }
    .section_router_collapsed {
      margin-left: 60px;
    }
    .section_router_mobile {
      margin-left: 0;
    }
    .mini_menu {
      width: 60px;
      background-color: #324157;
      color: #bfcbd9;
      margin: 0;
      padding: 0;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      min-height: calc(100vh - 50px);
      li {
        list-style: none;
        width: 100%;
        height: 56px;
        line-height: 56px;
        cursor: pointer;
        &:hover {
          background-color: #48576a;
        }
        .font-icon {
          margin-right: 0;
        }
      }
      i.fa {
        color: #fff;
        font-size: 18px;
        margin-right: 8px;
      }
    }
    .aside_menu {
      .menu_search {
        padding: 8px 6px 6px 6px;
        background-color: #eef1f6;
        display: none;
        input {
          height: 32px;
        }
      }
    }
  }
  &.home-mobile {
    .main {
      top: 50px;
    }
    .el-dialog {
      width: 95% !important; // 强制要求移动端下弹窗宽度尽可能大（不要滥用important）
    }
  }
}

.highcharts-credits {
  display: none;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: auto;
}
</style>
